﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Main.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <link href="Resources/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <link href="style/style.css" rel="stylesheet" type="text/css" />
    <style>
      .ui-autocomplete {
        max-height: 120px;
        overflow-y: auto;
        /* prevent horizontal scrollbar */
        overflow-x: hidden;
      }
      /* IE 6 doesn't support max-height
       * we use height instead, but this forces the menu to always be this tall
       */
      * html .ui-autocomplete {
        height: 120px;
      }
      </style>  
      <script>
          $(function () {
              var availableTags = [<%=Session["Rubros"]%>];
              $("#rubros").autocomplete({
                  source: availableTags
              });
          });
      </script>
      <script>
          $(function () {
              var availableCity = [<%=Session["Ciudades"]%>];
              $("#ciudadRubro").autocomplete({
                  source: availableCity
              });
          });
      </script>
       <script>
          $(function () {
              var availableCityEvent = [<%=Session["Ciudades"]%>];
              $("#ciudadEvento").autocomplete({
                  source: availableCityEvent
              });
          });
      </script>
   
   
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
       <div class="row" style="border-radius:5px;background-color: rgba(0,0,255,0.1);padding:5%;margin-top:10%;box-shadow: 10px 10px 5px #888;">
             <div class="col-md-3">
                  <div class="input-group">
                        <input type="text" id="rubros" placeholder="Que Buscas ? .." class="form-control" >
                        <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
                  </div>
            </div>
            <div class="col-md-3">
                    <div class="input-group">
                        <input type="text" class="form-control" id="ciudadRubro" placeholder="Ciudad">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-map-marker"></span></span>
                    </div>
             </div>
       </div>


          <!-- JavaScript -->

        <script src="Resources/js/bootstrap.js" type="text/javascript"></script>
        <script src="Resources/js/modern-business.js" type="text/javascript"></script>
    
    </asp:Content>

